<template>
  <el-table :data="accountModel.getList()" style="width: 100%">
    <el-table-column width="200" :label="lang.t('page.user.account.checkout')" prop="checkout">
      <template #default="scope">
        <el-link v-if="scope.row.checkout" type="primary" href="javascript:;">{{ scope.row.checkout.name }}</el-link>
      </template>
    </el-table-column>
    <el-table-column :label="lang.t('page.user.account.username')" prop="username" />
    <el-table-column :label="lang.t('page.user.account.name')" prop="name" />
    <el-table-column :label="lang.t('page.user.account.phone')" prop="phone" />
    <el-table-column :label="lang.t('page.user.account.status')">
      <template #default="scope">
        <el-tag :type="scope.row.status ? 'success' : 'danger'">
          {{ lang.tm('page.user.account.status_text')[scope.row.status] }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column :label="lang.t('page.user.account.permission')" width="200">
      <template #default="scope">
        <template v-for="item in permissionFilter(scope.row.permission)" :key="item.id">
          <el-tag effect="plain">{{ item.name }}</el-tag>&nbsp;
        </template>
      </template>
    </el-table-column>
    <el-table-column :label="lang.t('page.user.account.plugin')" width="200">
      <template #default="scope">
        <div class="plugin">
          <div class="img" v-for="item in pluginFilter(scope.row.plugin)" :key="item.id">
            <img :src="item.img()" alt="">
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column fixed="right" width="150">
      <template #default="scope">
        <div style="text-align: right">
          <el-button type="primary" size="small" @click="$emit('form', scope.row)">{{ lang.t('common.update') }}</el-button>
          <el-popconfirm
            :title="lang.t('alert.delete')"
            @confirm="accountModel.del(scope.row.id)"
            confirmButtonType="danger"
            placement="left"
            hideIcon
          >
            <template #reference>
              <el-button type="danger" size="small">{{ lang.t('common.delete') }}</el-button>
            </template>
          </el-popconfirm>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import app from '@/app'
import pluginModel from '@/model/plugin'
import permissionModel from '@/model/permission'
import accountModel from '@/model/user/account'

export default {
  setup() {
    // 加载数据
    accountModel.get()

    // 插件筛选
    const pluginFilter = (ids) => {
      return app.plugin.filter(pluginModel.getList(), ids)
    } 

    // 权限筛选
    const permissionFilter = (ids) => {
      return permissionModel.getList().filter(item => {
        return ids.includes(item.id)
      })
    } 

    return {
      lang: app.lang,
      pluginModel,
      pluginFilter,
      permissionFilter,
      accountModel,
    }
  }
}
</script>